.service-container{
    width: 100%;padding: 80px 0; position: relative;z-index: 22;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .service-infor{
        max-width: 460px;order: 2;padding-right:20px;
        h3{
            font-size: var(--f-size-48);color: #fff;padding-bottom: 30px;
        }
        .text{
            color: var(--color-grey);
        }
    }
    .service-img{
        width: 580px;height: 625px;position: relative;z-index: 31;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        order: 3;
        .item{
            max-width: 332px;position: inherit;z-index: 20;
            &:nth-child(1){
                position: absolute;top: 0;left: 0;z-index: 21;
                box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            }
        }
    }
    .lattice-group{
        top: 55%;left: -130px;
    }
    .lattice-7{
        top: 72px;right: 124px;
    }
    .lattice-8{
        bottom: 90px;left: 22px;
    }

    &:last-child{
        padding-bottom: 160px;
    }
    &:nth-child(2n){
        .service-infor{
            padding-right:0;padding-left: 20px;
        }
        .service-img{
            order: 1;
            justify-content: flex-start;
            .item{
                &:nth-child(1){
                    left: auto;right: 0;
                }
            }   
        }
        .lattice-group{
            top:auto;left: auto;right: 54px;bottom: 13%;
        }
        .lattice-7{
            right: 330px;
        }
        .lattice-8{
            bottom: 40px;left:332px;
        }
    }
}

.motivation-swiper{
    height: 100vh;
    .motivation-slide{
        .video-bg{
            transition: all .75s linear .25s;opacity: 0;
        }
        .top-banner{
            height: 100% !important;
        }
        .wrap-box{
            height: 100%;
            display: flex;
            align-items: center;
            .inner-content{   
                padding-bottom:20%; 
                .cont-til50{
                    padding-bottom:0.5em;
                }
                .txt{
                    max-width: 740px;
                    color: var(--color-grey);
                }
            }
            .lattice-group{
                right: 16.25%;top:20%;
            }
            .lattice-5{
                right:-166px;bottom:15%;
            }
            .lattice-6{
                left:-120px;top:30%;
            }
        }
        &:first-child{
            .wrap-box{
                .lattice-group{
                    right: auto;left: 16.805%;
                }
            }
        }
        .top-banner .inner-cont{
            h3{
                transform: translate3d(0,100%,0);transition-duration: 0.75s;opacity: 0;transition-timing-function: ease-in;
            }
            .en{
                transform: translate3d(0,200%,0);transition-duration: 0.75s;opacity: 0;transition-timing-function: ease-in;
            }
        }
        &.swiper-slide-active{
            .video-bg{
                opacity: 1;
            }
        }
    }
    .motivation-swiper-navigation{
        display: none;
        position: absolute;right: calc((100vw - 1440px) / 2);
        top: 50%;transform: translate(0,-50%);z-index: 9000;
        .item{
            height: 40px;color: var(--color-grey);cursor: pointer;position: relative;
            transition: all .275s  ease-in;
            .text{
                padding-right: 90px;display: inline-block;
            }
            .num{
                display: inline-block;
                transition: all .275s  ease-in; 
            }
            &::after{
                content: '';
                height: 0;
                position: absolute;top: 35px;right: 11px;left: 0;
                border-right: 1px #fff dashed;   
                transition: all .275s  ease-in;         
            }
            &:last-child{
                &::after{
                   top: auto;bottom: 35px;  
                } 
            }

            &.active{
                height: 180px;
                color: #fff;
                .num{
                    transform: scale(1.25);
                }
                &::after{
                    height: 145px;
                }
            }
            &:last-child{
                &.active{
                    height: 40px;
                    &::after{
                        height: 0;
                    }
                }
            }
        }
    }
}

.video-bg-swiper{
    position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 0;
    transition: opacity .25s linear;
    &.hide{
        opacity: 0;
    }
    .swiper-slide{
        .video-bg{
            &::after{
                content: '';
                position: absolute;width: 100%;height: 20%;left: 0;bottom: 0;z-index: 2;
                // background: linear-gradient(180deg,rgba(36,40,49,1),rgba(36,40,49,0));
                background: linear-gradient(180deg, rgba(36,40,49,0.00) 3%, #242831 94%);
            }
        }
    }
}

.footer-scroll-swiper{
    height:calc(100% - 100px);
    margin-top:100px;
    .swiper-slide{
        height: auto;
        .footer{
            height:calc(100vh - 100px);min-height:0;
            .wrap-box{
                display: block;
                height: auto;
            }
        }
    }
}


.case-cont-item{
    margin-top: 180px;position: relative;
    h3{
        margin-bottom: 15px;
    }
    .sub-til{
       color: var(--color-grey);
    }
    .lattice-group{
        left: 10.416%;top: -20px;
    }
    .lattice-5{
        right: -70px;top: 14.565%;
    }
    .lattice-6{
        left: -56px;bottom:-80px;
    }
}
.case-list{
    display: flex;
    margin-top: 86px;
    flex-wrap: wrap;
    justify-content: space-between;
    li{
        width: 23%;margin-bottom: 26px; box-sizing: border-box;
        a{
            display: block;
        }
        .icon{
            max-width: 160px;
        }
        .thumb{
            overflow: hidden;
            img{
                transition: all .75s linear;
            }
        }
        .content{
            h4{
                font-size: var(--f-size-30);color: #fff;padding: 16px 0 8px 0;
            }
            .txt{
                color: var(--color-grey);font-weight: 300;
            }
        }
        &:hover{
            .thumb img{
                transform: scale(1.05);
            }
            h4{
                color: var(--color-blue);
            }
        }
        
    }
    &.case-icon-group{
        li{
            position: relative; text-align: center;
            a{
                position: relative;z-index: 30;
            }
            .icon-box{
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all .275s ease-in;
            }
            .infor{
                color:var(--color-grey);overflow: hidden;
                width: 0;
                transition: all .275s ease-in;
                .inner{
                    width: 100px;
                }
                span{
                    display: block;text-align: left;
                }
            }
            .content{
                h4{
                   padding: 0 0 15px 0;
                }
            }
            &::after{
                content: '';
                position: absolute;width: 100%;height: 100%;top: 0;left: 0;
                background: url(../images/case/icon-bg_hover.jpg) no-repeat;
                background-size: cover !important;
                transition: all .275s ease-in;
                opacity: 0;
                transform: scale(0);
            }
            &:hover{
                &::after{
                    opacity: 1;
                    transform: scale(1);
                }
                .infor{
                    width: 100px;
                }
            }
        }
    }
}
.case-details-cont{
    position: relative;
    p{padding-bottom: 10px;font-weight: 300;}
    .lattice-5{
        right: -120px;top: 0;
    }
}
.introduce-cont{
    display: flex;
    justify-content: space-between;
    h4{
        font-size: 1.4em;color: #fff;padding-bottom: 20px;
    }
    .infor-box{
        width: 65%;
    }
}

.solution-list,
.more-solution-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: -18px;margin-right:-18px;
    li{
        box-sizing: border-box;padding: 18px;
        .thumb{
            overflow: hidden;
            img{
                transition: transform 1s ease-out;
            }
        }
        &:hover{
            .thumb{
                img{
                    transform: scale(1.05);
                }
            }
        }
    }
}
.solution-list{
    margin-top: 20px;
    li{
        width: 50%;
        h4{
            font-size: 1.2em;padding-top: 10px;
        }
    }
}
.more-solution-list{
    li{
        width: 33.33%;
        a{
            display: block;
        }
        h4{
            font-size: var(--f-size-30);color: #fff;padding-top: 20px;
        }

    }
}

@media screen and (max-height:730px) {
    .footer-scroll-swiper{     
        .swiper-slide{
            .footer{
                height:auto;
            }
        }
    }
}

@media screen and (max-width:1440px) {
    .motivation-swiper{
        .motivation-swiper-navigation{
            right: calc((100vw - 1200px) / 2);
        }
    }
    .footer-scroll-swiper{   
        height:calc(100% - 68px);  
        margin-top:68px;
        .swiper-slide{
            .footer{             
                .footer-cont{
                    margin-bottom: 80px;
                    padding-bottom: 0;
                }
            }
        }
    }
}

@media screen and (max-width:1200px) {
    .motivation-swiper{
        .motivation-swiper-navigation{
            right: 25px;
        }
    }
}

@media screen and (max-width:768px) {
    .service-container{
        padding: 30px 0;
        flex-direction: column;
        .service-infor{
            max-width: 480px;text-align: center;margin-bottom: 30px;
        }
        .service-img{
            width: 480px;
        }
        &:nth-child(2n){
            .service-img{
                order: 3;
            }
            .lattice-group{
                right: -30px;bottom:45%;
            }
        }
        &:last-child{
            padding-bottom: 90px;
        }
    }
    .motivation-swiper{      
        .swiper-slide{
            .bg{
                background-size: 100% auto;
                background-position: center 70%;
                @for $i from 1 through 3{
                    &.bg-item#{$i}{
                        background-image: url(../images/motivation-bg#{$i}@2x.jpg);
                    }
                }
            }
            .wrap-box{
                align-items: flex-start;
                .inner-content{
                    padding-top: 100px;
                }
                .lattice-group{
                    right:0;top:60px;
                }
                .lattice-5{
                    right:-30px;bottom:5%;
                }
                .lattice-6{
                    left:0;top:60%;
                }
            }
        }
        .motivation-swiper-navigation{
            right: auto;left:25px;
            .item{
                height: 30px;
                .text{
                    padding-right:20px;
                }
                &::after{
                    top: 22px;right: 7px;left: 0;      
                }
                &:last-child{
                    &::after{
                       bottom:25px;  
                    } 
                }
    
                &.active{
                    height: 60px;
                    &::after{
                        height: 35px;
                    }
                }
                &:last-child{
                    &.active{
                        height: 30px;
                        &::after{
                            height: 0;
                        }
                    }
                }
            }
        }
    }
    .video-bg-swiper{
        .swiper-slide{
            .video-bg{
                height: 110vw;top: auto;bottom: 11.675vw;
                // 106.75vw
                &::before{
                    content: '';
                    position: absolute;width: 100%;height:11vw;left: 0;top: 0;z-index: 2;
                    background: linear-gradient(to top, rgba(36,40,49,0.00) 3%, #242831 94%);
                }
                &::after{
                    display: none;
                }
            }
        }
    }
    .case-cont-item{
        margin-top: 80px;
        &:last-child{
            margin-bottom: 50px;
        }
    }
    .case-list{
        margin-top: 30px;
        li{
            width: 100%;
            a {
                display: flex;
                align-items: center;
                .thumb{
                    width: 36.5%;
                    img{
                        height: 100%;object-fit: cover;
                    }
                }
                .content{
                    width: 63.5%;box-sizing: border-box; padding-left: 20px;
                    h4{
                        padding:0 0 5px 0;
                    }
                }
            }
        }
        &.m-col-2{
            li{
                width:46%;
                a{
                    display: block;
                    .thumb{
                        width: 100%;
                    }
                    .content{
                        width: 100%;padding-left: 0;
                        h4{
                            padding:10px 0 0 0;
                        }
                    }
                }
            }
        }
        &.case-icon-group{
            li{
                text-align: left;
                a{
                    display: flex;
                    flex-direction: column;
                    padding:8vw 0 2vw 0;
                }
                .icon-box{
                    width: 85%;
                    justify-content: space-between;
                    align-items: flex-start;
                    order: 2;
                    margin-top: -10.25vw;
                }
                .icon{
                    order: 2;
                }
                .infor{                  
                    width: auto;
                    padding-top: 12.5vw;
                    font-size:12px;
                    .inner{
                        width: auto;
                    }
                    order: 1;
                }
                .content{
                    width: 85%;
                    padding:0;
                    order: 1;
                    h4{
                       padding:0;
                    }
                }
                &::after{
                    background: url(../images/case/icon-bg_hover@2x.jpg) no-repeat;
                    opacity: 1;
                    transform: scale(1);
                }
            }
        }
    }
    .introduce-cont{
        flex-direction: column;
        align-items: flex-start;
        .infor-box{
           width: 100%;padding-bottom: 5px;
        }
    }
    .solution-list,
    .more-solution-list{
        margin-left: -10px;margin-right:-10px;
        li{
            padding:10px;
        }
    }
}

@media screen and (max-width:480px) {
    .footer-scroll-swiper{     
        .swiper-slide{
            .footer{
                height:auto;
                .lattice-6 {
                    left: auto;
                    right: 20px;
                    top: 10px;
                }
            }
        }
    }
    .service-container{
        padding: 25px 0;
        .service-infor{
            h3{
                padding-bottom: 10px;
            }
        }
        .service-img{
            width:90%;height:85vw;
            .item{
                width: 57.75%;
            }
        }
        .lattice-7{
            right: 0;top: 0;
        }
        .lattice-8{
            left: 0;bottom: 0;
        }
        .lattice-group{
            left: -100px;top: 30%;
        }
        &:nth-child(2n){
            .lattice-7{
                right: auto;left: 0;
            }
            .lattice-8{
                left: auto;right: 0;bottom: 20px;
            }
            .lattice-group{
                right: -60px;
            }
        }
        &:last-child{
            padding-bottom: 50px;
        }
    }
    .case-cont-item{
       margin-top: 60px;
    }
    .case-list{
        li{
            margin-bottom: 4.266vw;
            a {              
                .thumb{
                    height: 25.5vw;
                }
                .content{
                    padding-left:15px;
                }
            }
            &:last-child{
                margin-bottom: 0;
            }
        }
    }
    .solution-list{
        margin-left: -5px;
        margin-right: -5px;
        li{
            padding: 5px;
            h4{font-size: 1em;}
        }
    }
    .more-solution-list{
        li{
            width: 100%;
            h4{
                padding-top: 10px;
            }
        }
    }
}

@media screen and (max-width:320px) {
    .case-list{
       li{
        .icon{
            max-width: 140px;
        }
       }
    }
}